<template>
	<view class="both-title" :style="isPd?`padding-left: 30rpx;padding-right: 30rpx;`:''">
		<view class="left-box" :style="{color: leftColor,fontWeight: isBlod?'700':'400'}">{{leftTit}}</view>
		<view class="right-box">{{rightTit}}</view>
	</view>
</template>

<script>
	export default {
		props: {
			leftTit: String,
			rightTit: String,
			leftColor: {
				type: String,
				default: '#333'
			},
			isBlod: {
				type: Boolean,
				default: false
			},
			isPd: {
				type: Boolean,
				default: false
			}
		}
	}
</script>

<style scoped lang="scss">
	.both-title {
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.left-box {
			position: relative;
			font-size: 32rpx;
			color: #1A1A1A;
			margin-left: 18rpx;
			&::before {
				content: '';
				position: absolute;
				top: 50%;
				left: -18rpx;
				display: inline-block;
				width: 5rpx;
				height: 30rpx;
				background-color: #0494D8;
				border-radius: 2.5rpx;
				transform: translateY(-50%);
			}
		}
		.right-box {
			color: #999999;
			font-size: 24rpx;
		}
	}
</style>
